<template>
	<view class="content">
		<view class="box">
			<u-row>
				<u-col span="3">
					<image :src="imgurl" class="proimg"></image>
				</u-col>
				<u-col span="9">
					<view class="u-line-1 title">阿迪达斯官网 Pro Bounce 2019Low BATW男子场上篮球运动鞋EG1536</view>
					<view>
						<view class="price">￥400.00</view>
						<view class="store">库存: 1746</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view>
			<view class="itemtitle">型号</view>
			<view>
				<view v-for="item in items" class="itembox">
					<view v-if="item.active" class="item on">
						<view @click="selitem(item)">{{item.title}}</view>
						<view class="close" @click="close(item)">x</view>
					</view>
					<view v-if="!item.active" class="item">
						<view @click="selitem(item)">{{item.title}}</view>
					</view>
				</view>
				<view class="itembox">
					<view class="item">
						<view>+添加+</view>
					</view>
				</view>
			</view>
			<view class="itemtitle">颜色</view>
			<view>
				<view v-for="item in subitems" class="itembox">
					<view v-if="item.active" class="item on">
						<view @click="selsubitem(item)">{{item.title}}</view>
						<view class="close" @click="closesub(item)">x</view>
					</view>
					<view v-if="!item.active" class="item">
						<view @click="selsubitem(item)">{{item.title}}</view>
					</view>
				</view>
				<view class="itembox">
					<view class="item">
						<view>+添加+</view>
					</view>
				</view>
			</view>
		</view>
		<view class="storebox">
			<u-row>
				<u-col span="4">
					<view class="itemnum">库存</view>
				</u-col>
				<u-col span="1" offset="4">
					<image src="../static/004.png" class="icon" @click="reducenum"></image>
				</u-col>
				<u-col span="2">
					<u-input :value="store" :height="50" class="storenum"></u-input>
				</u-col>
				<u-col span="1">
					<image src="../static/005.png" class="icon" @click="addnum"></image>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: "https://img.alicdn.com/imgextra/i2/446338500/O1CN01C1gPMf2Cf3B2m9MvK-446338500.jpg",
				store: 1,
				items: [{
						title: 'iphone5iphone5iphone5',
						sizes: [{
								title: '16G',
								price: "1288",
								store: 334,
								active: true
							},
							{
								title: '32G',
								price: "1688",
								store: 330,
								active: false
							},
							{
								title: '64G',
								price: "1988",
								store: 330,
								active: false
							},
						],
						active: true
					},
					{
						title: 'iphone6iphone6',
						sizes: [{
								title: '16G 白色',
								price: "1288",
								store: 334,
								active: false
							},
							{
								title: '32G 黑色',
								price: "1688",
								store: 330,
								active: false
							},
							{
								title: '64G 黑色',
								price: "1988",
								store: 330,
								active: false
							},
						],
						active: false
					},
					{
						title: 'iphone7iphone7',
						sizes: [{
								title: '16G 白色',
								price: "1288",
								store: 334,
								active: false
							},
							{
								title: '32G 黑色',
								price: "1688",
								store: 330,
								active: false
							},
							{
								title: '64G 黑色',
								price: "1988",
								store: 330,
								active: false
							},
						],
						active: false
					}
				],
				subitems: []
			};
		},
		methods: {
			selitem(item) {
				this.subitems = item.sizes
				this.items.forEach(
					(i) => {
						i.active = false
						i.sizes.forEach(j => j.active = false)
					}
				)
				item.active = true
				item.sizes[0].active = true
				this.subitems = item.sizes;
			},
			selsubitem(subitem) {
				let item;
				this.items.forEach((i) => {
					i.sizes.forEach((j) => {
						if (j == subitem) {
							item = i;
						}
					})
				})
				this.items.forEach(
					(i) => {
						i.active = false
						i.sizes.forEach(j => j.active = false)
					}
				)
				item.active = true
				subitem.active = true
			},
			close(item) {
				this.subitems = [];
				let i = this.items.findIndex(i => i == item);
				this.items.splice(i, 1)
				if (this.items.length > 0) {
					this.selitem(this.items[0])
				}
			},
			closesub(subitem) {
				let item;
				this.items.forEach((i) => {
					i.sizes.forEach((j) => {
						if (j == subitem) {
							item = i;
						}
					})
				})
				let i = item.sizes.findIndex(i => i == subitem);
				item.sizes.splice(i, 1)
				if (item.sizes.length > 0) {
					item.sizes[0].active = true
				}
			},
			reducenum() {
				if (this.store > 0) {
					this.store = this.store - 1;
				}

			},
			addnum() {
				this.store = this.store + 1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 20rpx;
		padding-top: 40rpx;
		margin-bottom: 80rpx;
	}

	.box {}

	.proimg {
		height: 120rpx;
		width: 120rpx;
	}

	.title {
		margin-top: 0rpx;
		margin-bottom: 30rpx;
	}

	.price {
		float: left;
		font-size: 38rpx;
		color: #ff0000;
	}

	.storebox {
		clear: both;
	}

	.store {
		float: left;
		color: #999;
		font-size: 22rpx;
		padding-left: 20rpx;
		margin-top: 5rpx;
	}

	.itemtitle {
		clear: both;
		color: #999;
		margin: 20rpx 0rpx;
	}

	.itembox {
		float: left;
	}

	.item {
		border: 1px solid #f2f2f2;
		font-size: 26rpx;
		color: #282828;
		padding: 4rpx 40rpx;
		background-color: #f2f2f2;
		text-align: center;
		margin: 10rpx 4rpx;
		position: relative;
	}

	.on {
		color: #e93323;
		background: #fff4f3;
		border-color: #e93323;
	}

	.icon {
		height: 40rpx;
		width: 40rpx;
	}

	.storenum {
		background-color: #DCDFE6;
		text-align: center;
	}

	.itemnum {
		color: #999;
		margin: 20rpx 0rpx;
	}

	.close {
		color: #2979FF;
		position: absolute;
		right: -5rpx;
		top: -15rpx;
		font-size: 34rpx;

	}
</style>
